<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full pos-relative z-1">
      <wd-navbar>
        <template #title>
          <text class="text-gray-333 font-size-36 font-500"></text>
        </template>
      </wd-navbar>

      <view class="w-full h-full p-x-28 p-y-32 pos-relative home-content">
        <view class="w-full hr-472 pos-absolute pos-top-0 pos-left-0 z--1">
          <image :width="'100%'" :height="'100%'" :src="headBg" />
        </view>
        <view class="flex justify-start item-center mg-b-40">
          <view @click="toUserInfo">
            <wd-img :width="'144rpx'" :height="'144rpx'" :radius="'72rpx'" :src="authorImg" />
          </view>
          <view class="flex flex-col justify-center mg-l-32">
            <view class="fles justify-start items-center user-name" @click="toUserInfo">
              <text>{{ authorName }}</text>
            </view>
            <view class="flex justify-start items-center user-info" @click="toCopy">
              <text>ID:</text>
              <text>{{ authorID }}</text>
              <wd-icon name="file-copy" class="user-icon"></wd-icon>
            </view>
          </view>
        </view>
        <!-- 优惠券 -->
        <view class="flex justify-between items-center person-info">
          <view
            class="flex flex-col justify-center items-center info-item"
            v-for="(item, index) in userInfos"
            :key="index"
            @click="toListPage(index)"
          >
            <view class="text-num">{{ item.value }}</view>
            <view class="text-spacing">{{ item.name }}</view>
          </view>
        </view>
        <!-- 全部订单 -->
        <view class="menu-box">
          <view class="flex justify-between items-center" @click="toAllOrder">
            <view class="menu-title">全部订单</view>
            <wd-icon name="chevron-right" class="menu-icon"></wd-icon>
          </view>
          <view class="flex justify-between items-center">
            <view
              class="flex flex-col justify-center items-center menu-item"
              v-for="(item, index) in orderList"
              :key="index"
              @click="toOrderPage(item, index)"
            >
              <view class="wr-48 hr-48 pos-relative">
                <image :width="'48rpx'" :height="'48rpx'" :src="item.icon" />
                <view
                  class="pos-absolute pos-right-0 pos-top-0 flex justify-center items-center p-x-14 p-y-6 rd-16 bg-red-1 line-height-none badge-pos"
                  v-if="item.number > 0"
                >
                  <text class="font-size-20 text-white line-height-none">
                    {{ item.number }}
                  </text>
                </view>
              </view>

              <view class="menu-name">{{ item.name }}</view>
            </view>
          </view>
        </view>
        <!-- 常用工具 -->
        <view class="menu-box">
          <view class="flex justify-between items-center">
            <view class="menu-title">常用工具</view>
          </view>
          <view class="flex justify-start items-center flex-wrap">
            <view
              class="flex flex-col justify-center items-center menu-item"
              v-for="(item, index) in funList"
              :key="index"
              @click="toMenuPage(index)"
            >
              <view class="wr-48 hr-48">
                <image :width="'100%'" :height="'100%'" :src="item.icon" />
              </view>
              <view class="menu-name">{{ item.name }}</view>
            </view>
          </view>
        </view>
        <!-- 主题背景 -->
        <view class="w-full hr-176">
          <image :width="'100%'" :height="'100%'" :src="imageUrl" />
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useCopyText } from '@/hooks/useCopyText'
import { getMyPage, getUserInfo } from '@/service/my/my'

defineOptions({
  name: 'Person',
})
const authorImg = ref('')
const authorName = ref('')
const authorID: any = ref('')
const headBg = ref('../../static/images/background/home-header.png')
const userInfos = ref([
  {
    name: '天琴币(个)',
    value: 0,
  },
  {
    name: '优惠券',
    value: 0,
  },
  {
    name: '收藏',
    value: 0,
  },
])
const orderList = ref([
  {
    icon: '../../static/images/icons/order-1.png',
    name: '待付款',
    number: 0,
  },
  {
    icon: '../../static/images/icons/order-2.png',
    name: '待收货',
    number: 0,
  },
  {
    icon: '../../static/images/icons/order-3.png',
    name: '待评价',
    number: 0,
  },
  {
    icon: '../../static/images/icons/order-4.png',
    name: '退款/售后',
    number: 0,
  },
])
const toOrderPage = (item: any, i: number) => {
  uni.setStorageSync('orderStatus', JSON.stringify(item))
  uni.navigateTo({
    url: '/pages/shopping/allOrder',
  })
}
const funList = ref([
  {
    icon: '../../static/images/icons/fun-7.png',
    name: '收货地址',
  },
  {
    icon: '../../static/images/icons/fun-3.png',
    name: '浏览记录',
  },
  {
    icon: '../../static/images/icons/fun-4.png',
    name: '信息设置',
  },
  {
    icon: '../../static/images/icons/fun-5.png',
    name: '分享赚',
  },
  {
    icon: '../../static/images/icons/fun-6.png',
    name: '绑定手机',
  },
  {
    icon: '../../static/images/icons/fun-1.png',
    name: '用户协议',
  },
  {
    icon: '../../static/images/icons/fun-2.png',
    name: '客服',
  },
])
const imageUrl = ref('../../static/images/background/pos-1.png')
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
onLoad(() => {})
const toUserInfo = () => {
  uni.navigateTo({
    url: '/pages/person/userInfo',
  })
}
const toListPage = (i: number) => {
  if (i === 0) {
    uni.navigateTo({
      url: '/pages/person/tqCurrency',
    })
  } else if (i === 1) {
    uni.navigateTo({
      url: '/pages/person/coupon',
    })
  } else if (i === 2) {
    uni.navigateTo({
      url: '/pages/shopping/collection',
    })
  }
}
const toMenuPage = (i: number) => {
  if (i === 3) {
    uni.navigateTo({
      url: '/pages/person/shareMoney',
    })
  } else if (i === 0) {
    uni.setStorageSync('chooseAddress', null)
    uni.navigateTo({
      url: '/pages/location/listLocation',
    })
  } else if (i === 1) {
    uni.navigateTo({
      url: '/pages/shopping/browseHistory',
    })
  } else if (i === 4) {
    goBindMobile()
  }
}
const toAllOrder = () => {
  uni.removeStorageSync('orderStatus')
  uni.navigateTo({
    url: '/pages/shopping/allOrder',
  })
}
const goBindMobile = () => {
  uni.navigateTo({
    url: '/pages/person/mobile',
  })
}
onShow(() => {
  getData()
})
const getData = () => {
  // 获取订单信息
  getMyPage().then((res: any) => {
    const data: any = res.data
    if (data) {
      userInfos.value[1].value = data.couponCount
      userInfos.value[2].value = data.collectCount
      if (data.orderInfo) {
        orderList.value[0].number = data.orderInfo.paying
        orderList.value[1].number = data.orderInfo.receiving
        orderList.value[2].number = data.orderInfo.commenting
        orderList.value[3].number = data.orderInfo.afterSale
      }
    }
  })
  // 获取用户信息
  getUserInfo().then((res: any) => {
    const userData: any = res.data
    const user: any = userData.user
    if (user) {
      authorImg.value = user.avatar
      userInfos.value[0].value = user.bonus
      authorName.value = user.nickname
      authorID.value = user.id
    }
  })
}
const cText: any = useCopyText()
const toCopy = () => {
  cText.copyText(String(authorID.value))
}
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  z-index: 1;
}
.head-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 472rpx;
  background-position: center;
  background-size: cover;
}
.home-content {
  position: relative;
  z-index: 0;
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
  background-color: #f6f6f8;
}
.user-name {
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
}
.user-info,
.user-icon {
  font-size: 30rpx;
  color: #333333;
}
.user-info {
  margin-top: 24rpx;
}
.user-icon {
  margin-left: 10rpx;
}
.person-info {
  height: 180rpx;
  padding: 0 48rpx;
  background: linear-gradient(128deg, #f5f0ff 0%, #dfdfff 100%);
  border-radius: 16rpx;
}
.text-spacing {
  margin-top: 20rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
}
.text-num {
  font-size: 40rpx;
  font-weight: 500;
  color: #333333;
}
.info-item {
  width: 30%;
}
.menu-box {
  padding: 30rpx 28rpx;
  margin-top: 32rpx;
  background: #ffffff;
  border-radius: 16rpx;
}
.menu-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}
.menu-icon {
  font-size: 36rpx;
  color: #999999;
}
.menu-item {
  width: 25%;
  margin-top: 32rpx;
}
.item-icon {
  width: 48rpx;
  height: 48rpx;
}
.menu-name {
  margin-top: 16rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
}
.image-box {
  height: 176rpx;
  margin-top: 32rpx;
  border-radius: 16rpx;
}
.badge-pos {
  transform: translateX(50%) translateY(-50%);
}
</style>
